<template>
  <a-layout>
    <a-layout-header
      :style="{
        position: 'fixed',
        zIndex: 1,
        width: '100%',
        background: '#fff',
        padding: '0 24px',
        borderBottom: '1px solid #f0f0f0',
        zIndex: '99',
        boxShadow: '0 1px 4px 0 rgb(0 21 41 / 12%)',
        transition: 'background .3s,width .2s'
      }"
    >
      <Head />
    </a-layout-header>
    <a-layout-content :style="{ marginTop: '64px',minHeight: 'calc(100vh - 166px)'}">
      <router-view v-slot="{ Component }">
        <transition name="slide-fade" mode="out-in">
          <component :is="Component" />
        </transition>
      </router-view>
    </a-layout-content>
    <a-layout-footer>
      <Footer/>
    </a-layout-footer>
  </a-layout>
</template>

<script setup>
import { defineAsyncComponent } from 'vue';

const Head = defineAsyncComponent(()=>import("../components/Head.vue"));
const Footer = defineAsyncComponent(()=>import('../components/Footer.vue'));
</script>

<style scoped>

/* 可以为进入和离开动画设置不同的持续时间和动画函数 */
.slide-fade-enter-active {
  transition: all 0.3s ease-out;
}

.slide-fade-leave-active {
  transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translateX(20px);
  opacity: 0;
}

</style>